---
import Icon from '../Icon.astro';
import Loader from '../Loader.astro';

export interface Props {
  contentContributionLink: string;
}

const { contentContributionLink } = Astro.props;
---

<div id='topic-overlay' class='hidden'>
  <div
    class='fixed top-0 right-0 z-40 h-screen w-full overflow-y-auto bg-white p-4 sm:max-w-[600px] sm:p-6'
    tabindex='-1'
    id='topic-body'
  >
    <div id='topic-loader' class='hidden'>
      <Loader />
    </div>

    <div id='topic-actions' class='mb-2 hidden'>
      <button
        data-popup='login-popup'
        ga-category='TopicClick'
        ga-action='topic/mark-completion'
        ga-label='done'
        class='inline-flex hidden items-center rounded-md bg-green-600 p-1 px-2 text-sm text-white hover:bg-green-700'
        id='mark-topic-done-login'
      >
        <Icon icon='check' />
        <span class='ml-2'>Mark as Done</span>
      </button>
      <button
        id='mark-topic-done'
        ga-category='TopicClick'
        ga-action='topic/mark-completion'
        ga-label='done'
        class='inline-flex hidden items-center rounded-md bg-green-600 p-1 px-2 text-sm text-white hover:bg-green-700'
      >
        <Icon icon='check' />
        <span class='ml-2'>Mark as Done</span>
      </button>

      <button
        id='mark-topic-pending'
        ga-category='TopicClick'
        ga-action='topic/mark-completion'
        ga-label='pending'
        class='inline-flex hidden items-center rounded-md bg-red-600 p-1 px-2 text-sm text-white hover:bg-red-700'
      >
        <Icon icon='reset' />
        <span class='ml-2'>Mark as Pending</span>
      </button>

      <button
        type='button'
        id='close-topic'
        class='absolute top-2.5 right-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900'
      >
        <Icon icon='close' />
      </button>
    </div>

    <div
      id='topic-content'
      class='prose prose-quoteless prose-h1:mt-7 prose-h1:mb-2.5 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mt-[10px] prose-h3:mb-[5px] prose-p:mt-0 prose-p:mb-2 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-li:m-0 prose-li:mb-0.5'
    >
    </div>

    <p
      id='contrib-meta'
      class='mt-10 hidden border-t pt-3 text-sm text-gray-400'
    >
      We are still working on this page. You can contribute by submitting a
      brief description and a few links to learn more about this topic <a
        target='_blank'
        class='text-blue-700 underline'
        href={contentContributionLink}>on GitHub repository.</a
      >.
    </p>
  </div>
  <div class='fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80'>
  </div>
</div>

<script src='./topic.js'></script>
<script>
  import Cookies from 'js-cookie';
  import { TOKEN_COOKIE_NAME } from '../../lib/constants';

  const markDone = document.getElementById('mark-topic-done');
  const loginMarkDone = document.getElementById('mark-topic-done-login');

  const token = Cookies.get(TOKEN_COOKIE_NAME);

  if (token) {
    loginMarkDone?.classList.add('hidden');
    markDone?.classList.remove('hidden');
  } else {
    loginMarkDone?.classList.remove('hidden');
    markDone?.classList.add('!hidden');
    loginMarkDone?.addEventListener('click', () => {
      // Close the overlay
      document.getElementById('topic-overlay')?.classList.add('hidden');
    });
  }
</script>
